<template>
	<view>
		<u-row gutter="0" >
			<u-col span="4" :class="[selectPage === 2 ? 'active-text' : '']" @click="selectIcon(2)">
				<view class="head-img">
					<image src="../../static/images/tuandui.svg"></image>
				</view>
				<view class="u-text-center">
					人员介绍
				</view>
			</u-col>
			<u-col span="4" :class="[selectPage === 1 ? 'active-text' : '']" @click="selectIcon(1)">
				<view class="head-img">
					<image src="../../static/images/xindong.svg"></image>
				</view>
				<view class="u-text-center">
					心得感受
				</view>
				
			</u-col>
			<u-col span="4" :class="[selectPage === 3 ? 'active-text' : '']" @click="selectIcon(3)">
				<view class="head-img">
					<image src="../../static/images/kaizhibaoxiao.svg"></image>
				</view>
				<view class="u-text-center">
					党费管理
				</view>
			</u-col>
		</u-row>

		<view class="uni-product-list" v-if="selectPage === 2">
			<u-grid :col="2" :border="false">
				<u-grid-item v-for="(person, index) in branchData.items" :key="index">
					<view class="grid-text">
						<image v-if="renderImage" mode="aspectFill" style="border-radius: 10rpx;"
							class="uni-product-image" @error="PhotoError" :src="person.PhotoUrl"
							@click="showPerson(person)"></image>
					</view>
					<view class="uni-product-price">
						<!-- <text class="uni-product-price-favour">{{person.Sex}}</text> -->
						<text class="uni-product-price-original">{{ person.MemberName }}</text>
						<text class="postion">{{ person.Position }}</text>
					</view>
				</u-grid-item>
			</u-grid>
		</view>

		<view class="" v-if="selectPage === 1">
			<!-- 心得感受 -->
			<experience :experience="experience"></experience>
		</view>
		<view class="" v-if="selectPage === 3">
			<!-- 党费管理 -->
			<!-- <freemanage :freeData="freeData"></freemanage> -->
			<view class="qiun-bg-white qiun-title-bar qiun-common-mt">
				<view class="qiun-title-dot-light">党费统计图</view>
			</view>
			<view class="qiun-charts"><canvas canvas-id="canvasColumn" id="canvasColumn" class="charts"
					@touchstart="touchColumn"></canvas></view>
		</view>
	</view>
</template>

<script>
	import uCharts from '../../js_sdk/u-charts/u-charts/u-charts.js';
	var _self;
	var canvaColumn = null;
	import {
		mapState,
		mapActions
	} from 'vuex';
	import experience from '../../components/experience.vue';
	import freemanage from '../../components/freemanage.vue';
	export default {
		components: {
			experience,
			freemanage
		},
		data() {
			return {
				branchCode: '',
				selectPage: 2,
				branchData: {},
				productList: [],
				renderImage: false,
				experience: [],
				freeData: {},
				cWidth: '',
				cHeight: '',
				pixelRatio: 1,
				serverData: '',
				chartData: {
					categories: [],
					series: []
				}
			};
		},
		onLoad(option) {
			this.branchCode = option.branchCode;
			this.hasLogin();
			this.getMember(option);
			setTimeout(() => {
				this.renderImage = true;
			}, 500);

			// this.getServerData();
		},
		computed: {
			...mapState(['token', 'userCode'])
		},
		methods: {
			...mapActions(['hasLogin', 'reLogin']),
			selectIcon(i) {
				this.selectPage = i;
				switch (i) {
					case 1: //心得感受
						this.getExperience();
						this.break;
					case 2: //人员介绍
						this.getMember();
						this.break;
					case 3:
						_self = this;
						this.cWidth = uni.upx2px(750);
						this.cHeight = uni.upx2px(500);
						this.getFree();
						break;
					default:
						break;
				}
			},
			// 人员介绍
			getMember() {
				uni.showLoading();
				let url = {
					url: '/api/Member'
				}
				let param = {
					userCode: this.userCode,
					branchCode: this.branchCode,
					token: this.token
				}
				this.$request.httpRequest(url, param).then(e => {
					if (!e.data.Success) {
						this.reLogin();
					}
					this.branchData = e.data;
					// console.log(e.data);
					uni.hideLoading();
				}).catch(e => {
					uni.hideLoading();
					console.log(e);
				})
			},
			// 跳转到人物介绍
			showPerson(person) {
				// console.log(person);
				uni.navigateTo({
					url: `/pages/personDetail/personDetail?InPartyDate=${person.InPartyDate}
					&MemberName=${person.MemberName}&Motto=${person.Motto}&PhotoUrl=${person.PhotoUrl}&Position=${person.Position}&Sex=${person.Sex}`
				});
			},

			goExperience() {
				uni.navigateTo({
					url: `/pages/experience/experience?userCode=${this.userCode}&branchCode=${this.branchCode}&token=${this.token}`,
					fail: e => {
						console.log(e);
					}
				});
			},
			onPullDownRefresh() {
				this.loadData('refresh');
				// 实际开发中通常是网络请求，加载完数据后就停止。这里仅做演示，加延迟为了体现出效果。
				setTimeout(() => {
					uni.stopPullDownRefresh();
				}, 2000);
			},
			getExperience() {
				// 心得感受
				let url = {
					url: '/api/GetExpList'
				}
				let param = {
					userCode: this.userCode,
					branchCode: this.branchCode,
					token: this.token
				}

				this.$request.httpRequest(url, param).then(e => {
					if (!e.data.Success) {
						this.reLogin();
					}
					this.experience = e.data.items;
					// console.log('experience',this.experience);
				})
			},
			getFree() {
				uni.showLoading();
				let url = {
					url: '/api/MemberFee'
				}
				let param = {
					userCode: this.userCode,
					branchCode: this.branchCode,
					token: this.token
				}
				this.$request.httpRequest(url, param).then(e => {
					if (!e.data.Success) {
						console.log(e.data.Message);
						this.reLogin();
					}
					this.freeData = e.data;

					let Column = {
						categories: [],
						series: []
					};
					e.data.items.forEach((r, index) => {
						// alert(index);
						let seriesList = [];
						let free = parseFloat(r.TotalMonthFee);
						if (free > 0) {
							for (var i = 0; i < r.details.length; i++) {
								Column.categories[i] = r.details[i].MemberName; //组装人员列表
							}
						}
						this.chartData.categories = Column.categories;
						// 组装数据
						let detal = {
							name: r.YearMonth,
							data: []
						};
						r.details.forEach((s, i) => {
							detal.data[i] = s.MonthFee;
						});
						this.chartData.series[index] = detal
					});
					// console.log(this.chartData);
					// let Column = { categories: [], series: [] };
					//这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去
					Column.categories = this.chartData.categories;
					Column.series = this.chartData.series;
					_self.showColumn('canvasColumn', Column);
					uni.hideLoading();
				})
			},
			showColumn(canvasId, chartData) {
				canvaColumn = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'column',
					legend: {
						show: true
					},
					fontSize: 11,
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					animation: true,
					categories: chartData.categories,
					series: chartData.series,
					// enableScroll: true,//开启图表拖拽功能	
					xAxis: {
						// disableGrid: true
					},
					yAxis: {
						disabled: true
					},
					dataLabel: true,
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeight * _self.pixelRatio,
					extra: {
						// showBox:false,
						column: {
							type: 'group',
							width: (_self.cWidth * _self.pixelRatio * 0.45) / chartData.categories.length
						}
					}
				});
			},
			touchColumn(e) {
				canvaColumn.showToolTip(e, {
					format: function(item, category) {
						if (typeof item.data === 'object') {
							return category + ' ' + item.name + '：' + item.data.value;
						} else {
							return category + ' ' + item.name + '党费：' + item.data;
						}
					}
				});
			},
			onReachBottom() {
				// this.loadData();
			},
			PhotoError(e) {
				alert(e)
			}
		}
	};
</script>

<style scoped lang="scss">
	/* product */
	page {
		background: #f8f8f8;
	}

	view {
		font-size: 28upx;
	}

	.wrap {
		padding: 24rpx;
	}

	

	.uni-product-list {
		display: flex;
		width: 100%;
		flex-wrap: wrap;
		flex-direction: row;
	}

	.uni-product {
		padding: 20upx;
		display: flex;
		flex-direction: column;
	}

	.image-view {
		height: 330upx;
		width: 330upx;
		margin: 12upx 0;
	}

	.uni-product-image {
		height: 330upx;
		width: 330upx;
	}

	.uni-product-title {
		width: 300upx;
		word-break: break-all;
		display: -webkit-box;
		overflow: hidden;
		line-height: 1.5;
		text-overflow: ellipsis;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.uni-product-price {
		margin-top: 10upx;
		font-size: 28upx;
		font-size: $font-lg;
		line-height: 1.5;
		position: relative;
	}

	.uni-product-price-original {
		color: $font-color-base;
		// color: #e80080;
	}

	.uni-card__footer-text {
		color: red !important;
		font-size: 55rpx;
	}

	.qiun-padding {
		padding: 2%;
		width: 96%;
	}

	.qiun-wrap {
		display: flex;
		flex-wrap: wrap;
	}

	.qiun-rows {
		display: flex;
		flex-direction: row !important;
	}

	.qiun-columns {
		display: flex;
		flex-direction: column !important;
	}

	.qiun-common-mt {
		margin-top: 10upx;
	}

	.qiun-bg-white {
		background: #ffffff;
	}

	.qiun-title-bar {
		width: 96%;
		padding: 10upx 2%;
		flex-wrap: nowrap;
	}

	.qiun-title-dot-light {
		border-left: 10upx solid #0ea391;
		padding-left: 10upx;
		font-size: 32upx;
		color: #000000;
	}

	.qiun-charts {
		width: 750upx;
		height: 500upx;
		background-color: #ffffff;
	}

	.charts {
		width: 750upx;
		height: 500upx;
		background-color: #ffffff;
	}

	.postion {
		float: right;
		font-size: 0.7rem;
		padding-top: 5px;
		color: #FA436A;
	}
	.head-img {
		text-align: center;
		image{
		width: 6rem ;
		height: 6rem ;
		margin: 0 auto;
		}
	}
	.active-text{
		color: #FA436A;
	}
</style>
